@import './_vars.scss';
.xdh-map-drawdown {
  .item {
    margin-bottom: 5px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .5);
    color: $--popup-color;
  }
  input[type="checkbox"]{
    display: none;

  }
  &__title{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0 5px;
    font-size: 14px;
    background: $--popup-title-bg;
    .name-warp{
      flex: 1;
      line-height: 30px;
    }
    label{
      transition: all 0.5s;
      transform: rotate(0deg);
      cursor: pointer;
    }
  }
  &__content{
    box-sizing: border-box; 
    max-height: 0;
    overflow: hidden;
    transition: all 0.7s;
    background: white;
    .inner{
      padding: 5px;
    }
  }
  input[type="checkbox"]:checked + &__title label{
    transform: rotate(-90deg);
  }
  input[type="checkbox"]:checked ~ &__content{
    transition: all 0.4s;
    max-height: 2000px;
  }
}